<template>
    
   <div style="height:80%">
    <div class="mask">  
    </div>
    <div class="container">
        <div class="head">
            <div class="title"><p><slot></slot></p></div>
            <div class="navigator">
                <el-button
                v-for="button in buttons"
                :key="button.text"
                :type="button.type"
                text
                @click="button.click"
                >{{ button.text }}</el-button>
       
        </div>

        </div>

        
        <div class="text">
            <el-input
            class="textarea"
            v-model="textarea1"
            :autosize="{minRows: 4}"
            type="textarea"
   
        />
        </div>

        <div class="settings">
            <div class="settingButtonGroup">
                <el-button text class="setTimeButton" disabled @click="Toggle.time = !Toggle.time">&nbsp;<el-icon color="#79bbff" ><Clock /></el-icon>&nbsp;设置时间&nbsp;</el-button>
                <el-button class='setLevelButton' text  @click="Toggle.level = !Toggle.level">&nbsp;<el-icon color="#79bbff"><Orange /></el-icon>&nbsp;分类&nbsp;</el-button>
            </div>
              

            <div class="setting_level" v-if="Toggle.level">
           <div class="trangle-up"></div>
           <div class="levelContainer">

                <ul>
                    <li :class="{'active' : isactive === index }"
                        v-for="(item,index) in bgList" @click="selectColor(index)" :key="index">
                        <span>{{item.text}}</span>

                        <div class="dotItem" :style="{backgroundColor:item.color}"></div>

                    </li>
                </ul>
           </div>

        </div>
      
   


        
            
          
      </div>
      <div class="setting_time" v-if="Toggle.time">
          
          <el-input v-model="input2">
              <template #append>时</template>
          </el-input>
          <el-input v-model="input3">
          <template #append>分</template>
          </el-input>
          </div>
    </div>

   </div>

</template>

<script setup>
import requestMethods from '../../api/api';
import { ref,reactive,defineEmits, onMounted } from 'vue'
import { ElMessageBox,ElNotification } from 'element-plus';

import useStore from '../../store'
import { defineProps } from 'vue'

const userStore = useStore().user

const emit = defineEmits(['showClick'])

let task = reactive({
    content:'',
    level:'',
    status:'',
    timestamp:''
})
const props = defineProps({
    clickTask:Object
})
onMounted(()=> {
   
   
    if(props.clickTask != undefined)
    
        {
            const editTask = props.clickTask

            textarea1.value = editTask.content
            attribute.level = editTask.level

            Toggle.level = true

            isactive.value = bgList.findIndex(item => item.level === editTask.level)
        }

})
const textarea1 = ref('')

let Toggle = reactive({
    time:false,
    level:false

})
let isactive = ref(-1)

const bgList = [
    {level:'normal',color:'#409eff',text:'普通事项'},
    {level:'priority',color:'#67c23a',text:'优先事项'},
    {level:'emergent',color:'#E6A23C',text:'紧急事项'},
    {level:'important',color:'#F56C6C',text:'重要事项'},]

const input2 = ref('')
const input3 = ref('')

let attribute = {
    color :'',
    level:''
}
const buttons = [

  { type: 'primary', text: '确定' ,click:toSubmitEvent},

  { type: 'info', text: '取消', click:toggle },

]
function toggle(){
    emit('showClick',{addEventDialog:false})
}

function selectColor(index){
    attribute.color = bgList[index].color
    attribute.level = bgList[index].level

    isactive.value = index
    
    console.log(isactive.value,index)
    // Toggle.level = false

    console.log(attribute);
}

function toSubmitEvent(){
    console.log(userStore.getSelectedDay);

    if(textarea1.value == '')
        {
            ElMessageBox.alert('内容不能为空','error',{
                type:'error'
            })
          

          console.log("修改了")

        return
    }

    if(props.clickTask != undefined)
    {
        console.log("修改了")
        task = {
            id:props.clickTask._id,
            content:textarea1.value,
            status:'doing',
            level:attribute.level,
            timestamp:useStore().user.getSelectedDay
        }
        requestMethods.updateTask(task)
            .then(res=>{
                let task = res.data.task
                userStore.updateTask(task,task._id)
                ElNotification({
                    title: 'Success',
                    message: '修改事件内容成功',
                    type: 'success',
                })
            })
            .catch(err=>{
                ElNotification({
                    title: 'Error',
                    message: err,
                    type: 'Error',
                })
            })
            emit('showClick',{addEventDialog:false})

        return;
    }else{  
        task = {
            content:textarea1.value,
            status:'doing',
            level:attribute.level,
            timestamp:useStore().user.getSelectedDay
        }
        console.log(task)

        requestMethods.addTask(task)
        .then(res=>{
              ElNotification({
                    title: 'Success',
                    message: '创建事件成功',
                    type: 'success',
                })
            userStore.insertTask(res.data.data)
        })
        .catch(err=>{
            console.log(err)
        })

    emit('showClick',{addEventDialog:false})
    }
    
 
}

</script>

<style lang="less" scoped>
@bg:#fff;
.mask{
  
  position: fixed;
  top: 0px;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

.container{

    z-index: 100;
 
    position: fixed;
    display: flex;
    border:1px solid #ccc;
    flex-direction: column;
    justify-content: space-between;
    left: calc(50% - 26rem);
    top: calc(50% - 12rem);
    width: 52rem;
    min-height: 16rem;

    padding: 0px 40px;
    border-radius: 16px;
    opacity: 1;
    background-color: @bg;
    transition: height 0.5s ease;

    .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
            p{
                font-size: 1.4rem;
                font-weight: 600;
            }
        }
        :deep(.navigator){
            button{
                font-size: 1.4rem;
            }
        }
    }

    .text{
        textarea{
            display: flex;
            font-family: PingFang SC, Microsoft Yahei, sans-serif;
            width: 100%;
            min-height: 4rem;
            margin: 2rem 0 2rem 0;
            border: 0;
            color: var(--Gray-7);
            background-color: @bg;
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 400;
            letter-spacing: 2px;
            outline: none;
            resize: none;
    
        }
    }

    .settings {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  justify-content: flex-start;
  align-items: center;
  .settingButtonGroup{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .setTimeButton{
        font-size: 1.2rem;
        margin-right: 20px;
        padding: 0;
        border-radius: 15px;
    }

    .setLevelButton{
    position: relative;
    font-size: 1.2rem;
    border-radius: 15px;
    }



  }

  .setting_level {
    transition: transform 0.3s ease;
    position: absolute;
    top: 100%;
    left: 100px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #fff;
    width: auto;
    border-radius: 14px;
    height: 80px;
    .levelContainer::before {
      content: "";
      position: absolute;
      right: 80%;
      bottom: 80px;
      width: 0;
      height: 0;
      border-left: 13px solid transparent;
      border-right: 13px solid transparent;
      border-bottom: 13px solid #2a4d71;
    }
    .levelContainer {

      .drop {
        border-radius: 50%;
        padding: 14px;
      }
      ul{
        display: flex;
        padding: 0;
        li{
            font-weight: 600;
            transition: all 0.3s ease;
            border-radius: 10px;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 10px;
            margin-left: 10px;
            margin-right: 10px;
            border: 2px solid #fff;
            // padding-left: 10px;
            // padding-right: 10px;
            span{
                line-height: 20px;
                padding-right: 4px;
            }
            .dotItem{
                border-radius: 50%;
                width: 20px;
                height: 20px;
       
            }
        }

        li:hover{
            border-radius: 10px;
            // border: 2px solid rgb(121, 187, 255);
            background-color: rgb(212, 233, 255);
            transition: all 0.3s ease;
        }

        li.active{
            transition: all 0.3s ease;
            border: 2px solid rgb(121, 187, 255);
            background-color: rgb(212, 233, 255);
        }
      }
     
    }
  }

 
}


}
</style>